<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="订单编号" prop="schemeName">{{ form.schemeName }}</el-form-item>
                    <el-form-item label="优惠券ID" prop="designIdea">{{ form.designIdea }}</el-form-item>
                    <el-form-item label="优惠券名称" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="优惠渠道" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="优惠类型" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="适用范围">
                        <el-table v-loading="tableDataLoading" :data="tableData" style="margin:20px 0;" max-height="500">
                            <el-table-column prop="id" :label="`${name}ID`" align="center" :show-overflow-tooltip="true" />
                            <el-table-column :label="`${name}形象照`" align="center" width="110">
                                <template #default="scope">
                                    <image-preview :width="60" :height="60" :src="scope.row.figureImg"
                                        :preview-src-list="[scope.row.figureImg]"></image-preview>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" :label="`${name}名称`" align="center"
                                :show-overflow-tooltip="true" />
                            <el-table-column prop="address" :label="`${name}地址`" align="center"
                                :show-overflow-tooltip="true" />
                            <el-table-column label="操作" align="center" width="80">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click="detailHandel(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="手机号" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="下单时间" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="付款时间" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="头像" prop="number">{{ form.number }}</el-form-item>
                    <div v-if="isEdit === 'edit'">
                        <el-form-item label="订单状态" prop="materialSupplierStatus" style="width:40%;min-width:350px;">
                            <el-select v-model="form.materialSupplierStatus" placeholder="请选择订单状态" size="large">
                                <el-option label="待支付" :value="1" />
                                <el-option label="已取消" :value="2" />
                                <el-option label="待使用" :value="3" />
                                <el-option label="已使用" :value="4" />
                                <el-option label="退款" :value="5" />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.materialSupplierStatus === 5" label="退款审核" prop="materialSupplierStatus"
                            style="width:40%;min-width:350px;">
                            <el-select v-model="form.refund" placeholder="请选择退款状态" size="large">
                                <el-option label="拒绝" :value="0" />
                                <el-option label="同意" :value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.materialSupplierStatus === 5 && form.refund === 0" label="拒绝原因："
                            prop="remark" style="width:60%;min-width:400px;">
                            <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.remark"
                                @focus="remarkLimit = true" @blur="remarkLimit = false" :show-word-limit="remarkLimit"
                                maxlength="100" placeholder="请输入拒绝退款原因" />
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <div v-if="form.materialSupplierStatus === 4">
            <my-tag title="使用记录" :showSortImg="false"></my-tag>
            <div style="padding:0 20px;">
                <el-form :model="recordQueryParams" ref="queryRef" :inline="true" v-show="showSearch">
                    <el-form-item label="核销账号" prop="organizationName">
                        <el-input v-model="recordQueryParams.organizationName" placeholder="请输入用户名称"
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading="recordLoading" :data="recordsTableData" row-key="couponId" style="width:96%;">
                    <el-table-column label="ID" :show-overflow-tooltip="true" align="center" prop="couponId" />
                    <el-table-column label="使用时间" :show-overflow-tooltip="true" align="center" prop="couponFrom" />
                    <el-table-column label="优惠券来源" :show-overflow-tooltip="true" align="center" prop="couponName" />
                    <el-table-column label="核销途径" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
                    <el-table-column label="核销账号" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
                </el-table>
                <pagination v-show="recordTotal > 0" :total="recordTotal" v-model:page="recordQueryParams.pageNum"
                    v-model:limit="recordQueryParams.pageSize" @pagination="getList" />
            </div>
        </div>

        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm" v-if="isEdit === 'edit'">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { getOrder, updateOrder } from "@/api/decor/orderMGT";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
let remarkLimit = ref(false)
const recordsTableData = ref([]) // 记录
const showSearch = ref(true)
const recordTotal = ref(0)
const tableData = ref([]) // 优惠券渠道表格
const tableDataLoading = ref(true)
const recordLoading = ref(true)
let title = ref('')
let isEdit = ref('')
const data = reactive({
    form: {},
    // 弹框表格搜索
    recordQueryParams: {
        pageSize: 2,
        pageNum: 1,
        names: ''
    },
    rules: {
        remark: [{ required: true, message: "审核未通过原因不能为空", trigger: "blur" }],
        materialSupplierStatus: [
            { required: true, message: "请选择材料商状态", trigger: "blur" }
        ],
    }
});
const { form, recordQueryParams, rules } = toRefs(data);
const name = ref('');
// 获取数据
(() => {
    const orderId = route.params.orderId
    title.value = route.params.origin === 'edit' ? '订单管理' : '订单详情'
    isEdit.value = route.params.origin
    // tableDataLoading.value = true
    // recordLoading.value = true
    // if (orderId) {
    //     getOrder(orderId).then(response => {
    //         tableDataLoading.value = false
    //         recordLoading.value = false
    //     });
    // }

})();
// 搜索
const handleQuery = () => {
    recordQueryParams.value.pageNum = 1;
    getList();
}
// 重置
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
}
// 优惠券详情
const detailHandel = (row) => {
    if (form.value.couponFrom === '材料商') {
        router.push('/MaterialStore/auditMaterial/' + row.id + '/detail')
    } else {
        router.push('/designAgency/auditDesignAgencyDeco/' + row.id + '/detail')
    }
}
// 提交
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value.materialSupplierId != null) {
                proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                    return updateOrder(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("提交成功");
                    router.go(-1)
                }).catch(() => { });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 4px 0 4px;
        }
    }
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>